<template>
  <view class="goods_item" >
    <!-- 左侧 -->
    <view class="goods_left">
      <radio @click="radioClick" v-if="selected" :checked="goods.goods_state" color="#C00000"/>
      <image :src="goods.goods_small_logo || 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'"> </image>
    </view>
    <!-- 右侧 -->
    <view class="goods_right">
      <view class="title">{{ goods.goods_name }}</view>
      <view class="info">
        <view class="price">￥{{ goods.goods_price | tofixed}}</view>
        <uni-number-box v-if="numberBox" :min="1" :value="goods.goods_count" @change="numChangeHandle"/>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        
      }
    },
    methods:{
      numChangeHandle(newVal) {
        const obj = {
          goods_count: newVal,
          goods_id: this.goods.goods_id
        }
        this.$emit('num-change', obj)
      },
      radioClick() {
        const obj = {
          goods_id: this.goods.goods_id,
          goods_state: !this.goods.goods_state
        }
        this.$emit('radioChange', obj)
      }
    },
    props:{
      goods:{
        type: Object,
        default: {}
      },
      selected:{
        type: Boolean,
        default: false
      },
      numberBox:{
        type: Boolean,
        default: false
      }
    },
    filters: {
      tofixed(num) {
        return Number(num).toFixed(2)
      }
    }
  }
</script>
<style lang="scss">
  .goods_item{
    padding: 10px;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    .goods_left{
      display: flex;
      align-items: center;
      margin-right: 5px;
      .radio{
        margin-right: 5px;
      }
      >image{
        width: 100px;
        height: 100px;
      }
    }
    .goods_right{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-size: 13px;
      }
      .info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #C00000;
        .uni-numbox{
          flex: 1
        }
      }
    }
  }
</style>
